<template>
	<div class="song-list">
		<!-- 歌单头部 start -->
		<div class="song-list-hd">
			<img src="../assets/img/song-list.png" alt="" />
		</div>
		<!-- 歌单头部 end -->

		<!-- 歌单身体 start -->
		<div class="song-list-bd">
			<div class="list-title">推荐歌单</div>
			<div class="list-content">
				<el-row>
					<el-col
						:xs="6"
						:sm="6"
						:md="6"
						:lg="4"
						v-for="item of songList"
						:key="item.specialid"
					>
						<div
							class="item"
							@click="targetSongListDetails(item.specialid)"
						>
							<div class="img">
								<img :src="item.imgurl" />
								<div class="fill-screen">
									<i>&#xe627;</i>
								</div>
							</div>
							<div class="intro">{{ item.specialname }}</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>
		<!-- 歌单身体 end -->
	</div>
</template>
<script>
export default {
	data() {
		return {
			// 歌单列表
			songList: [],
		};
	},
	methods: {
		// 获取歌单的列表
		getSongList() {
			this.axios.get("/api-song-list/index&json=true").then((res) => {
				res.data.plist.list.info.forEach((item) => {
					item.imgurl = item.imgurl.replace(/\/{size}/, "");
				});
				this.songList = res.data.plist.list.info;
			});
		},
		// 跳转到歌单详情页面
		targetSongListDetails(specialid) {
			sessionStorage.setItem("specialid", specialid);
			this.$router.push(`/songListDetails/${specialid}`);
		},
	},
	mounted() {
		this.getSongList();
	},
};
</script>
<style lang="scss">
.song-list {
	// 歌单页面身体 start
	.song-list-bd {
		margin-top: 30px;
		.list-title {
			font-size: 18px;
			font-weight: 700;
			margin-bottom: 20px;
		}
		.list-content {
			.el-row {
				display: flex;
				flex-wrap: wrap;
				.el-col {
					margin-bottom: 20px;
					.item {
						width: 100%;
						height: 100%;
						cursor: pointer;
						.img {
							overflow: hidden;
							position: relative;
							width: 90%;
							border-radius: 10px;
							img {
								width: 100%;
								height: 100%;
							}
							.fill-screen {
								display: none;
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%;
								background-color: rgba(0, 0, 0, 0.4);
								i {
									position: absolute;
									top: calc(50% - 25px);
									left: calc(50% - 25px);
									font-family: "iconfont";
									color: #fff;
									font-size: 50px;
									&:hover {
										color: #5192fe;
									}
								}
							}
							&:hover {
								.fill-screen {
									display: block;
								}
							}
						}
						.intro {
							width: 90%;
							line-height: 20px;
							margin-top: 10px;
							display: -webkit-box;
							overflow: hidden;
							text-overflow: ellipsis;
							text-overflow: -o-ellipsis-lastline;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							font-size: 14px;
							cursor: pointer;
							color: #333;
							&:hover {
								color: #5192fe;
							}
						}
					}
				}
			}
		}
	}
	// 歌单页面身体 end
}
</style>
